<!--
 * 单选组件
-->
<template>
	<page-layout class="page-layout">
		<!-- 基础使用 -->
		<app-demo-module title="基础使用">
			<pure-radio-group v-model="sex">
				<pure-radio label="男" value="男"></pure-radio>
				<pure-radio label="女" value="女"></pure-radio>
			</pure-radio-group>
			<pure-gap></pure-gap>
			<pure-radio-group v-model="age">
				<pure-radio label="18岁" value="18"></pure-radio>
				<pure-radio label="20岁" value="20"></pure-radio>
			</pure-radio-group>
		</app-demo-module>

		<!-- 单数使用 -->
		<app-demo-module title="单数使用">
			<pure-radio
				label="我已阅读并同意《相关协议》"
				alone
				v-model="aloneStatus"
			></pure-radio>
		</app-demo-module>

		<!-- 只读 -->
		<app-demo-module title="只读">
			<pure-radio
				label="我已阅读并同意《相关协议》"
				alone
				v-model="aloneStatus"
				readonly
			></pure-radio>
		</app-demo-module>

		<!-- 禁用 -->
		<app-demo-module title="禁用">
			<pure-radio-group v-model="sex">
				<pure-radio label="男" value="男" disabled></pure-radio>
				<pure-radio label="女" value="女" disabled></pure-radio>
			</pure-radio-group>
			<pure-gap></pure-gap>
			<pure-radio-group v-model="age">
				<pure-radio label="18岁" value="18" disabled></pure-radio>
				<pure-radio label="20岁" value="20" disabled></pure-radio>
			</pure-radio-group>
		</app-demo-module>
	</page-layout>
</template>

<script setup>
import { ref, computed } from "vue";

// 性别
const sex = ref("男");

// 年龄
const age = ref("18");

// 单数使用
const alone = ref(true);
const aloneStatus = ref(false);
</script>

<style scoped lang="scss">
.page-layout {
}
</style>
